<template>
  <div>
    <el-table style="width: 100%; margin-bottom: 20px; margin-top: -15px" :data="detailsList">
        <el-table-column label="序号" align="center" type="index"/>
        <el-table-column label="编号" align="center" prop="occupationDetailsId" />
        <el-table-column label="CAS编号" align="center" prop="casNo" :show-overflow-tooltip="true" />
        <el-table-column label="名称" align="center" prop="materialName" />
        <el-table-column label="型号规格" align="center" prop="model" />
        <el-table-column label="单位" align="center" prop="unitOpt" :formatter="unitOptFormat"/>
        <el-table-column label="领用数量" align="center" prop="occupationQuantity"/>
        <el-table-column label="领取时间" align="center" prop="receiverTime" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-info" @click="getInfo(scope.row)" v-if="scope.row.receiverTime">查看</el-button>
          <el-button size="mini" :disabled="scope.row.status == 2" type="text" icon="el-icon-edit" @click="handleUse(scope.row)"
          v-hasPermi="['system:deliver:edit']">领用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <OutflowInfo ref="outflowInfo" ></OutflowInfo>
    <OutflowReceive @list="getList" ref="outflowReceive" ></OutflowReceive>
  </div>
</template>

<script>
  import { listDetails } from "@/api/labdanger/occupationDetail"
  import { getAllRestrictedKinds } from "@/api/labdata/cylindersType"
  import OutflowReceive from "@/views/labdanger/dangerComps/occupation/outflowReceive.vue"
  import OutflowInfo from "@/views/labdanger/dangerComps/occupation/outflowInfo.vue"
  export default {
    name: "OccupationOutFlow",
    components: {
      OutflowInfo,
      OutflowReceive
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 类别字典
        kindsOptions: [],
        // 单位字典
        unitOptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100,
          instanceId: null,
        },
        // 总条数
        total: 0,
        // 申请采购明细表格数据
        detailsList: [],
        // 表单参数
        form: {}
      };
    },
    props: {
      instanceId: Number,
    },
    watch: {},
    created() {
      this.getAllKinds();
      this.getList();
      this.getDicts("unitOpt").then(response => {
        this.unitOptOptions = response.data;
      });
    },
    methods: {
      getInfo(row) {
        this.$refs["outflowInfo"].handleShow(row);
      },
      handleUse(row) {
        this.$refs["outflowReceive"].handleShow(row);
      },
      /** 查询在用化学品列表 */
      getList() {
        this.queryParams.instanceId = this.instanceId;
        this.loading = true;
        listDetails(this.queryParams).then(response => {
          this.detailsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getAllKinds() {
        getAllRestrictedKinds().then(response => {
          this.kindsOptions = response.data;
        });
      },
      // 类别字典翻译
      kindsFormat(row, column) {
        for (let i = 0; i < this.kindsOptions.length; i++) {
          if (this.kindsOptions[i].kindsId == row.hazardousOpt) {
            return this.kindsOptions[i].name;
          }
        }
        return '';
      },
      // 单位字典翻译
      unitOptFormat(row, column) {
        return this.selectDictLabel(this.unitOptOptions, row.unitOpt);
      }
    }
  };
</script>
<style type="text/css" scoped>
  .input_cas {
    width: 300px;
  }

  .item {
    margin-bottom: 2px;
  }
  .uploadCss .el-upload {
    display: none !important;
  }
</style>
